﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Animated Expander Button's Template-->
    <ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
        <Border x:Name="ExpanderButtonBorder"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Fill="Transparent"
                               Grid.ColumnSpan="2"/>
                <Ellipse Name="Circle"
                         Grid.Column="0"
                         Stroke="DarkGray"
                         Width="20"
                         Height="20"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         />
                <Path x:Name="Arrow"
                      Grid.Column="0"
                      Data="M 1,1.5 L 4.5,5 8,1.5"
                      Stroke="#FF666666"
                      StrokeThickness="2"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      RenderTransformOrigin="0.5,0.5"
                      >
                    <Path.RenderTransform>
                        <RotateTransform Angle="0"/>
                    </Path.RenderTransform>
                </Path>
                <ContentPresenter x:Name="HeaderContent"
                                      Grid.Column="1"
                                      Margin="4,0,0,0"
                                      ContentSource="Content"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <!-- Animate arrow when toggled-->
            <Trigger Property="IsChecked"
                         Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Arrow"
                                                 Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                                 To="180"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Arrow"
                                                 Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                                 To="0"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>

            <!-- MouseOver, Pressed behaviours-->
            <Trigger Property="IsMouseOver"
                                 Value="true">
                <Setter Property="Stroke"
                                    Value="#FF3C7FB1"
                                    TargetName="Circle"/>
                <Setter Property="Stroke"
                                    Value="#222"
                                    TargetName="Arrow"/>
            </Trigger>
            <Trigger Property="IsPressed"
                                 Value="true">
                <Setter Property="Stroke"
                                    Value="#FF526C7B"
                                    TargetName="Circle"/>
                <Setter Property="StrokeThickness"
                                    Value="1.5"
                                    TargetName="Circle"/>
                <Setter Property="Stroke"
                                    Value="#FF003366"
                                    TargetName="Arrow"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- Stretch Out Content Expander's Template,
        Uses: AnimatedExpanderButtonTemp from above-->
    <ControlTemplate x:Key="StretchyExpanderTemp" TargetType="{x:Type Expander}">
        <DockPanel>
            <ToggleButton x:Name="ExpanderButton" 
                              DockPanel.Dock="Top"
                              Template="{StaticResource AnimatedExpanderButtonTemp}"
                              Content="{TemplateBinding Header}"
                              IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                              OverridesDefaultStyle="True"
                              Padding="1.5,0">
            </ToggleButton>
            <ContentPresenter x:Name="ExpanderContent"
                                  ContentSource="Content"
                                  DockPanel.Dock="Bottom"
                                  >
                <ContentPresenter.LayoutTransform>
                    <ScaleTransform ScaleY="0"/>
                </ContentPresenter.LayoutTransform>
            </ContentPresenter>
        </DockPanel>
        <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ExpanderContent"
                                                 Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"                                                 
                                                 To="1"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ExpanderContent"
                                                 Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
                                                 To="0"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>
    <!-- Slide Out Content Expander's Template, 
        Uses: AnimatedExpanderButtonTemp from above, 
              MultiplyConverter static resource in App.Xaml-->
    <ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
        <DockPanel>
            <ToggleButton x:Name="ExpanderButton" 
                              DockPanel.Dock="Top"
                              Template="{StaticResource AnimatedExpanderButtonTemp}"
                              Content="{TemplateBinding Header}"
                              IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                              OverridesDefaultStyle="True"
                              Padding="1.5,0">
            </ToggleButton>
            <ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom"
                              HorizontalScrollBarVisibility="Hidden"
                              VerticalScrollBarVisibility="Hidden"
                              HorizontalContentAlignment="Stretch"
                              VerticalContentAlignment="Bottom"
                              Height="{Binding ElementName=ExpanderContentScrollView, Path=ActualHeight}"
                              Tag="{Binding RelativeSource={RelativeSource Self} , Path=Tag}"
                              >
                <!--<ScrollViewer.Tag>
                    <system:Double>0.0</system:Double>
                </ScrollViewer.Tag>-->
                <!--<ScrollViewer.Height>
                    <MultiBinding Converter="{StaticResource MultiplyConverter}">
                        <Binding Path="ActualHeight" ElementName="ExpanderContent"/>
                        <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                    </MultiBinding>
                </ScrollViewer.Height>-->
                <ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
            </ScrollViewer>
        </DockPanel>
        <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
                                                 Storyboard.TargetProperty="Tag"                                                 
                                                 To="1"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
                                                 Storyboard.TargetProperty="Tag"                                                 
                                                 To="0"
                                                 Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>